﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../mixins/style/base.css"/>
    <link rel="stylesheet" href="../mixins/style/normalize.css"/>

    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->


    <style>
        .container {
            overflow: hidden;
            position: relative;
            width: calc(100% - 20px);
            margin: 10px auto;
        }

        .search-wrap .el-input,
        .search-wrap .el-select {
            vertical-align: middle;
        }

        .el-table__expanded-cell[class*=cell] {
            padding: 0px;
            padding-left: 48px;
            margin: -1px;
        }
    </style>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #app {
            height: 100%;
        }
    </style>

    <style>
        .pdfobject-container {
            height: 100%;
            background-color: orangered
        }

        .pdfobject {
            border: 1px solid #666;
        }

        .el-popover,
        .el-tabs--border-card {
            box-shadow: none;
        }

        .list-group-item.active,
        .list-group-item.active:focus,
        .list-group-item.active:hover,
        .list-group-item:hover {
            background-color: deepskyblue;
            color: white;
            cursor: pointer;
        }

        .list-group-item.active,
        .list-group-item.active:focus,
        .list-group-item.active:hover,
        .list-group-item:hover {
            border-color: deepskyblue;
            color: white;
            cursor: pointer;
        }

        .rectangle_ul .badge {
            background-color: orangered;
            color: white;
        }
    </style>
    <link rel="stylesheet" href="../lib/toastr/toastr.css">
    <script src="../lib/vue-router.js"></script>

  

</head>

<body>


<div id="app" class="container-fluid">

    <el-tabs type="border-card" class="mt_20">


        <el-tab-pane label="基本信息">

            <el-row>

                <el-col :span="24">
                    <div class="grid-content bg-purple-light">
                        <el-form ref="templateFileForm" :model="templateFile" label-width="200px">
                            <el-form-item label="全称">
                                <el-input v-model="templateFile.fullName" placeholder="全称"></el-input>
                            </el-form-item>
                            <el-form-item label="简称">
                                <el-input v-model="templateFile.shortName" placeholder="简称"></el-input>
                            </el-form-item>
                            <el-form-item label="单模板路径">
                                <el-input v-model="templateFile.path" placeholder="非单模板时,请留空!!1"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onTemplateFileFormSubmit">保 存</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>


        </el-tab-pane>

        <el-tab-pane label="覆盖层">

            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">

                        <ul class="list-group rectangle_ul">

                            <li class="list-group-item " v-bind:class="{active:index==CurRectangleIndex}"
                                v-for="(rectangle,index) in templateRectangleList"
                                v-on:click="changeCurRectangleIndex(index)">
                                {{rectangle.name}}
                                <span class="badge" v-if="rectangle.id==0">未保存</span>
                            </li>
                        </ul>

                        <button class="btn btn-block btn-info" v-on:click="addRectangle">添加覆盖层</button>

                        <button class="btn btn-block btn-danger" v-on:click="delRectangle">删除覆盖层</button>

                        <button class="btn btn-block btn" v-on:click="rectangleRefresh">刷新</button>

                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content bg-purple-light">
                        <el-form v-if="templateRectangleList.length>0" ref="rectangleForm" :model="curRectangleItem"
                                 label-width="20px">
                            <el-form-item label="">
                                <el-input v-model="curRectangleItem.name" placeholder="名称"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curRectangleItem.positionX" placeholder="横向坐标"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curRectangleItem.positionY" placeholder="纵向坐标"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curRectangleItem.width" placeholder="宽度"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curRectangleItem.height" placeholder="高度"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curRectangleItem.rgbRed" placeholder="红色值"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curRectangleItem.rgbGreen" placeholder="绿色值"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curRectangleItem.rgbBlue" placeholder="蓝色值"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curRectangleItem.pageNum" placeholder="页码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">保 存</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>


        </el-tab-pane>
        <el-tab-pane label="添加文本">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">

                        <ul class="list-group rectangle_ul">

                            <li class="list-group-item " v-bind:class="{active:index==CurTextIndex}"
                                v-for="(text,index) in templateTextList"
                                v-on:click="changeCurTextIndex(index)">
                                {{text.name}}
                                <span class="badge" v-if="text.id==0">未保存</span>
                            </li>
                        </ul>

                        <button class="btn btn-block btn-info" v-on:click="addText">添加文本</button>

                        <button class="btn btn-block btn-danger" v-on:click="delText">删除文本</button>

                        <button class="btn btn-block btn" v-on:click="rectangleRefresh">刷新</button>

                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content bg-purple-light">
                        <el-form v-if="templateTextList.length>0" ref="textForm" :model="curTextItem"
                                 label-width="20px">
                            <el-form-item label="">
                                <el-input v-model="curTextItem.name" placeholder="名称"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curTextItem.positionX" placeholder="横向坐标"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curTextItem.positionY" placeholder="纵向坐标"></el-input>
                            </el-form-item>

                            <el-form-item label="">
                                <el-input v-model="curTextItem.rgbRed" placeholder="红色值"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curTextItem.rgbGreen" placeholder="绿色值"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curTextItem.rgbBlue" placeholder="蓝色值"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curTextItem.content" placeholder="文本内容"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curTextItem.fontSize" placeholder="字体大小"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curTextItem.fontName" placeholder="字体名称"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curTextItem.fontEncoding" placeholder="字体编码"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curTextItem.pageNum" placeholder="页码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onTextSubmit">保 存</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="添加图片">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">

                        <ul class="list-group rectangle_ul">

                            <li class="list-group-item " v-bind:class="{active:index==CurImageIndex}"
                                v-for="(text,index) in templateImageList"
                                v-on:click="changeCurImageIndex(index)">
                                {{text.name}}
                                <span class="badge" v-if="text.id==0">未保存</span>
                            </li>
                        </ul>

                        <button class="btn btn-block btn-info" v-on:click="addImage">添加文本</button>

                        <button class="btn btn-block btn-danger" v-on:click="delImage">删除文本</button>

                        <button class="btn btn-block btn" v-on:click="rectangleRefresh">刷新</button>

                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content bg-purple-light">
                        <el-form v-if="templateImageList.length>0" ref="imageForm" :model="curImageItem"
                                 label-width="20px">
                            <el-form-item label="">
                                <el-input v-model="curImageItem.name" placeholder="名称"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curImageItem.positionX" placeholder="横向坐标"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curImageItem.positionY" placeholder="纵向坐标"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curImageItem.width" placeholder="宽度"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curImageItem.height" placeholder="高度"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curImageItem.imgPath" placeholder="图片地址"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="curImageItem.pageNum" placeholder="页码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onImageSubmit">保 存</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </el-tab-pane>

        <el-tab-pane label="生成">
            <div id="example1">待加</div>
        </el-tab-pane>
    </el-tabs>


</div>


<script src="../lib/jquery.js"></script>
<script src="../lib/sea-all.js"></script>

<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>

<script src="../page/boot.js"></script>
<script src="../lib/lodash.js"></script>

<link rel="stylesheet" href="../lib/font-awesome/css/font-awesome.css">

<!-- 引入组件库 -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
<link rel="stylesheet" href="../lib/elementui/index.css">
<script src="../lib/elementui/index.js"></script>
<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap-theme.css">

<link rel="stylesheet" href="../lib/toastr/toastr.css"/>
<script src="../lib/toastr/toastr.min.js"></script>

<script src="../mixins/global.mixins.js"></script>

<script>
    $(function () {
        // inlineBlock 兼容safari
        function inlineBlockHack() {
            $('.inline-block-container').contents().filter(function () {
                return this.nodeType === 3;
            }).remove();
        }

        inlineBlockHack();
    });
</script>

<script>
    $(function () {
        seajs.use('page/templateFileEdit.js');
    })
</script>


</body>